<template>
  <div class="page-container">
    <van-icon name="first-aid" />
    <div class="top-top">
      <div class="img_div">
        <van-icon @click="arrowleft" name="arrow-left" style="margin-left: 20px;margin-top: 20px;margin-right: 250px" size="30px" />
        <img @click.stop="shoucang2(cars.carId,cars.isFavorite)"  v-if="cars.isFavorite==0" style="margin-top: 13px; margin-right: 10px; margin-left: 0px; width: 40px;height: 40px"   src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/Lovenull.png?e=1737255146&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:yu6Xduz8_A_ENt0AbJ5R2nvPYgk=">
        <img @click.stop="shoucang2(cars.carId,cars.isFavorite)"  v-if="cars.isFavorite==1" style="margin-top: 13px; margin-right: 10px; margin-left: 0px; width: 40px;height: 40px" src="http://sq4f6kqu8.hn-bkt.clouddn.com/rentalcars/love.png?e=1737255201&token=rWxRhgEIi6r6WpeIwlvhTEPMnsDCB8KqZ34tVS7A:aJpokByV4d5CkHa9XvtnnFkLDkU=" alt="">
        <van-icon  name="info"  @click="showPopup" style="margin-top: 14px" size="37px"/>

      </div>

    </div>
    <div class="top">
      <van-swipe :autoplay="3000"  class="swipe-container">
        <van-swipe-item>
          <img style="width: 100%; height: 100%;" :src="imageUrl" />
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%; height: 100%;" :src="imageUrl" />
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%; height: 100%;" :src="imageUrl" />
        </van-swipe-item>
        <van-swipe-item>
          <img style="width: 100%; height: 100%;" :src="imageUrl" />
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="bottom">
      <div class="bottom-top">
        <h4 style="float:left; margin-left: 20px">{{cars.carModel}}</h4>
        <h4 style="float: right;margin-right: 20px;margin-top: 40px" >￥{{cars.pricePerHour}}/小时</h4>
<!--        <svg t="1737025502221"  color="blink" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3878" width="10" height="10"><path d="M629.333333 330.666667h10.666667a117.333333 117.333333 0 0 1 117.333333 117.333333v330.666667a42.666667 42.666667 0 1 0 85.333334 0V277.333333a53.333333 53.333333 0 0 1-29.354667-97.877333L768 106.666667l22.613333-22.613334 116.053334 116.032V778.666667a106.666667 106.666667 0 0 1-213.333334 0V448a53.333333 53.333333 0 0 0-53.333333-53.333333h-10.666667v512H682.666667v64H85.333333v-64h53.333334V170.666667A117.333333 117.333333 0 0 1 256 53.333333h256A117.333333 117.333333 0 0 1 629.333333 170.666667v160z m-64 576V170.666667A53.333333 53.333333 0 0 0 512 117.333333H256A53.333333 53.333333 0 0 0 202.666667 170.666667v736h362.666666z m-298.666666-704h234.666666v192h-234.666666v-192z m64 64v64h106.666666v-64h-106.666666zM256 768h256v64H256v-64z" fill="#979797" p-id="3879"></path></svg>-->
        <span style="margin-left: -50px;margin-top: 56px; float:left; font-size: 10px">24%油量</span>
      </div>
      <div class="bottom-bottom"  v-if="reviews">
        <h4 style="float:left; margin-top: 10px;margin-left: 20px">用户评价({{count}})</h4>
        <span style="float:right;; margin-top: 10px;margin-left: 20px;margin-right: 20px">全部评价<van-icon @click="review" name="arrow" /></span>
      </div>

    </div>
    <div class="div3" v-if="reviews">
      <div class="button-group">
        <button class="but1">汽车很新</button>
        <button class="but1">服务很好</button>
        <button class="but1">还车方便</button>
      </div>
      <div class="div2">
        <van-image class="img2" round width="3rem" height="3rem" :src="reviews.userImageUrl" />
        <span class="span2">{{ reviews.userName }}</span>
        <span class="span3">{{ reviews.reviewDate | format("yyyy-MM-dd")}}</span><br />
        <van-rate class="xing1" v-model="reviews.rating" readonly/><br />
        <p>{{ reviews.reviewText }}</p>
        <img v-if="reviews.reviewImageUrl" class="img1" :src="reviews.reviewImageUrl" />
      </div>
    </div>
    <div class="div3" v-if="!reviews">
      <p>暂无评价</p>
    </div>


    <van-button  type="primary" style="width: 90%;background-color: #007aff" @click="nearby"><b>我要租车</b></van-button>

    <van-popup v-model="show" position="bottom" :style="{ height: '20%' }">
      <div class="share-modal">
        <div class="share-options">
          <div class="share-option">
            <img class="tu" src="https://img1.baidu.com/it/u=3165023803,2137666183&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
            微信
          </div>
          <div class="share-option">
            <img class="tu" src="https://img0.baidu.com/it/u=2409804027,1436607697&fm=253&fmt=auto&app=138&f=PNG?w=250&h=250" />
            朋友圈
          </div>
          <div class="share-option">
            <img class="tu" src="https://b0.bdstatic.com/2d5f17ae885bfbc63b9ef5f8467d3dfa.jpg@h_1280" />
            QQ
          </div>
          <div class="share-option">
            <img class="tu" src="https://img1.baidu.com/it/u=277575764,4206894026&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" />
            QQ空间
          </div>
        </div>
        <div class="cancel-btn" @click="show = false">取消</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import reviewView from "@/views/review/ReviewView.vue";

export default {
  name: "detailsView",
  data() {
    return {
      count:0,
      value: 5,
      show: false,
      imageUrl:'',
      cars:{},
      list3: [
        {
          name: '吴化平',
          title: '副主任医师',
          skill: '冠心病外科治疗、心脏不停跳下',
          status: ''
        }
      ],
      reviews: {
        userImageUrl: '',
        userName: '',
        reviewDate: '',
        rating: 0,
        reviewText: '',
        reviewImageUrl: '',
      },
    }
  },
  created() {
    this.user = JSON.parse(localStorage.getItem("currentUser"))
    this.cars = JSON.parse(localStorage.getItem("cars"))
    this.address = this.user.address
    console.log(this.user)
    if (this.user == null) {
      this.$router.push({ name: 'login' });
    }
    this.imageUrl = this.cars.imageUrl
    this.findReviewsAll()
    this.findCar()
  },
  methods: {
    findCar(){
      this.axios.get(`http://localhost:10086/api/cars/cars/getCarByCarId/${this.cars.carId}`).then(res=>{
        if (res.data.code == 200){
          this.cars = res.data.data
          console.log(this.cars)
        }else{
          this.$toast.fail('获取数据失败')
        }
      })
    },
    shoucang2(carId,isFavorite){
      console.log("收藏"+carId,isFavorite)
      if (isFavorite == 0) {
        const cars = {
          carId:carId,
          isFavorite:1,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          // location.reload()
          this.findCar()
        })
      }else {
        const cars = {
          carId:carId,
          isFavorite:0,
          userId:this.user.userId
        }
        this.axios.put('http://localhost:10086/api/cars/cars/updateCar',cars).then(res=>{
          // location.reload()
          this.findCar()
        })
      }



    },
    findReviewsAll(){
      var carId = this.cars.carId
      this.axios.get(`http://localhost:10086/api/user/reviews/findReviewsAll/${carId}`).then(res=>{
        if (res.data.code == 200){
          console.log(res.data.data[0])
          this.count = res.data.data.length
          this.reviews = res.data.data[0]
          this.reviews.userName = this.reviews.userName.substring(0,1)+'**'
        }else{
          this.reviews=null
        }
      })
    },
    arrowleft(){
      this.$router.go(-1)
    },
    review(){
      this.$router.push('/review')
    },
    showPopup(){
      this.show= true
    },
    // 租车
    nearby(){
      this.$router.push('/nearby')
    },
    // 收藏
    collection(){
      this.$router.push('/collection')
    }
  },
  filters:{
    format(value,arg){
      function dateFormat(date, format) {
        if (typeof date === "string") {
          var mts = date.match(/(\/Date\((\d+)\)\/)/);
          if (mts && mts.length >= 3) {
            date = parseInt(mts[2]);
          }
        }
        date = new Date(date);
        if (!date || date.toUTCString() == "Invalid Date") {
          return "";
        }
        var map = {
          "M": date.getMonth() + 1, //月份
          "d": date.getDate(), //日
          "h": date.getHours(), //小时
          "m": date.getMinutes(), //分
          "s": date.getSeconds(), //秒
          "q": Math.floor((date.getMonth() + 3) / 3), //季度
          "S": date.getMilliseconds() //毫秒
        };
        format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
          var v = map[t];
          if (v !== undefined) {
            if (all.length > 1) {
              v = '0' + v;
              v = v.substr(v.length - 2);
            }
            return v;
          } else if (t === 'y') {
            return (date.getFullYear() + '').substr(4 - all.length);
          }
          return all;
        });
        return format;
      }

      return dateFormat(value,arg);

    }
  },
}
</script>

<style>
.but1{
  width: 95px;
  height: 35px;
  border: none;
  border-radius: 20px;
  background: #eff2ff;
  font-size: 14px;
  margin-right: 10px;
}
.bottom{
  width: 90%;
  margin-top: 20px;
  height: 150px;
  //background-color: #666666;
}
.bottom-top{
  width: 100%;
  height: 100px;
  //background-color: #a18a8a;
}
.bottom-bottom{
  width: 100%;
  height: 50px;
  //background-color: #a18a8a;
  overflow: hidden;
}
.icon{
  float: left;
  margin-top: 2px;
  margin-left: 2px;
  color: #000000;
}

.page-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
}
.top-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  padding: 10px;
  display: flex;
  justify-content: center;
  background-color: #f7f7f7;
}
.img_div {
  display: flex;
  height: 50px; /* 可根据实际情况调整盒子的高度 */
  width: 100%;
  position: relative; /* 相对定位，为绝对定位的子元素提供定位上下文 */
}
.t1 {
  position: absolute;
  max-width: 70%; /* 防止图片过大，可根据需要调整 */
  max-height: 70%; /* 防止图片过大，可根据需要调整 */
}
.top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px; /* 可根据实际情况调整高度 */
  width: 100%;
  background-color: #f7f7f7;
  margin-top: 50px; /* 为按钮留出空间，可根据按钮高度调整 */
}
.swipe-container {
  width: 90%; /* 轮播图容器的宽度，可根据实际情况调整 */
  height: 90%;
  border-radius: 5% 5%;
}
@import './share.css';
</style>